<template>
  <div class="queue_pag" v-if="showMe">
    <section class="business_top">
      <img src="../images/FASTkitchen.png">
      <div class="font_words">
        <div class="fw_top">
          <div class="fw_top_word clear">
            <h3 class="ell">{{this.storeName}}</h3>
            <p class="ell">公告：欢迎光临本店，祝您用餐愉快。</p>
          </div>
        </div>
      </div>
    </section>
    <div class="scan">
        <div class="content">
          <div class='loader-ring'>
            <div class='loader-ring-light' v-show="isQueue"></div>
            <div class='loader-ring-track'>
              <h2 v-show="isQueue !== true" style="margin-top: 1.2rem !important">目前有{{this.add}}桌排队</h2>
              <h1 v-show="isQueue !== true" style="margin-top: .8rem !important">点击下方取号</h1>
              <h2 v-if="indexs !== 0" v-show="isQueue" style="margin-top: 1.2rem !important">需等待{{this.indexs}}桌</h2>
              <h2 v-if="indexs === 0" v-show="isQueue" style="margin-top: 1.2rem !important">等待上桌</h2>
              <h1 v-show="isQueue" style="margin-top: .8rem !important">号码：{{this.queueNum}}</h1>
            </div>
          </div>
      </div>
      <footer>
        <div class="fbt" @click="queue_num" v-if="isQueue === false">排队取号</div>
        <div class="fbt2" v-if="isQueue">正在排队</div>
      </footer>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'queue',
    data () {
      return {
        showMe: false,
        // 排队号
        queueNum: '',
        // 店家名称
        storeName: '',
        // 店家图片
        storeImg: '',
        // 是否正在排队
        isQueue: false,
        // 前方等待人数
        indexs: '',
        // 总等待人数
        add: ''
      };
    },
    methods: {
      // 开始排队
      queue_num () {
        this.$store.dispatch('setLoading', true);
        this.showMe = false;
        if (this.isQueue === false) {
          this.$http
            .post(
              this.global.url + 'pos/line_up?imei=' + this.global.imei + '&config_id=' + this.global.queueid + '&queue=1',
              {},
            {
              emulateJSON: true,
              header: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
            )
            .then(
              response => {
                response = response.data;
                window.opener = null;
                window.open('', self);
                window.close();
                let routeData = this.$router.resolve({ name: 'queue' });
                window.open(routeData.href, '_blank');
              },
              response => {
                // error callback
                console.log(response.data);
              }
            );
        }
      },
      // 查询排队
      // star () {
      //   this.$http
      //     .get(
      //       this.global.url + 'pos/line_up?imei=' + this.global.imei + '&config_id=' + this.global.queueid + '&queue=2',
      //       {},
      //     {
      //       emulateJSON: true,
      //       header: {
      //         'Access-Control-Allow-Origin': '*',
      //         'Content-Type': 'application/x-www-form-urlencoded'
      //       }
      //     }
      //     )
      //     .then(response => {
      //       response = response.body;
      //       this.storeName = response.store_name;
      //       this.storeImg = 'data:image/png;base64,' + response.image_icon;
      //       this.add = response.number;
      //       if (response['index'] !== -1) {
      //         this.isQueue = true;
      //         this.indexs = index;
      //       }
      //       this.showMe = true;
      //       this.$store.dispatch('setLoading', false);
      //     });
      // },
      // 更新排队
      star2 () {
        this.$http
          .post(
            this.global.url + 'pos/line_up?imei=' + this.global.imei + '&config_id=' + this.global.queueid + '&queue=2',
            {},
          {
            emulateJSON: true,
            header: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
          )
          .then(
            response => {
              response = response.data;
              this.add = response.number;
              this.queueNum = response.name;
              if (response['index'] !== -1) {
                this.isQueue = true;
                this.indexs = response.index;
              } else {
                if (this.isQueue) {
                  this.isQueue = false;
                  window.opener = null;
                  window.open('', self);
                  window.close();
                  this.global.queueid = this.code['config_id'];
                  let routeData = this.$router.resolve({ name: 'queue' });
                  window.open(routeData.href, '_blank');
                }
              }
              this.showMe = true;
              this.$store.dispatch('setLoading', false);
            },
            response => {
              // error callback
              console.log(response.data);
            }
          );
      },
      update () {
        // 定时刷新
        if (this.$route.path === '/queue') {
          let _this = this;
          this.timeOut = setTimeout(() => {
            _this.star2();
            console.log('刷新');
            _this.update();
          }, 5000);
        } else {
          clearTimeout(this.timeOut);
        }
      }
    },
    created () {
      // alert(this.global.imei + '&&&&' + this.global.queueid);
      this.$store.dispatch('setLoading', false);
      // 设置当前状态为加载中
      this.$store.dispatch('setLoading', true);
      this.update();
    }
  };
</script>

<style lang="less">
  body{
    line-height: inherit !important;
  }
.queue_pag{
  background: white;
  width: 100%;
  height: 100%;
  /* 头部 */
  .business_top{
    height:4rem;
    position:relative;
    .blur_bg{
      background:no-repeat center;
      width:100%;
      height:100%;
      position:absolute;
      background-size: cover;
      -webkit-filter:blur(.08rem);
      filter:blur(.08rem);
      z-index: 1;
    }
    .font_words{
      width:100%;
      height:100%;
      position:absolute;
      padding-top: .6rem;
      box-sizing:border-box;
      z-index:2;
      .fw_top{
        .fw_top_word{
          color:#fff;
          h3{
            color: black;
            font-size:.7rem;
          }
          p{
            font-size:.37rem;
          }
        }
        .shop_activity{
          font-size:.3rem;
          color:#fff;
          line-height:.8rem;
          .new_user{
            display:inline-block;
            width:.35rem;
            height:.35rem;
            background:rgb(240, 115, 115);
            line-height:.35rem;
            text-align:center;
            vertical-align:middle;
            font-style: normal;
            font-size:.25rem;
            margin-right: .1rem;

          }
          span{vertical-align:middle;}
        }
      }
    }
  }
  .scan {
    height: auto;
  }
  .content {
    margin-top: 3rem;
  }
  .scan footer {
    width: 100%;
    height: 1.5rem;
    position: absolute;
    bottom: 0;
    line-height: 1rem;
    text-align: center;
    color: #FFF;
  }
  .scan footer button{
    width: 45%;
    font-size: 1rem;/*px*/
  }
  .clickBtn,.cancelBtn{
    margin-top:20px;/*px*/
    width: 150px;/*px*/
    height: 60px;/*px*/
    text-align: center;
  }
  .cancelBtn{
    margin-left: 20px ;/*px*/
  }
  .scan footer .fbt{
    padding-top: .2rem;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #0096FF;
    float: left;
    font-size: .8rem;
  }
  .scan footer .fbt2{
    padding-top: .2rem;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #2ac845;
    float: left;
    font-size: .8rem;
  }
  .scan footer .fbt:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  }
  .relative {
    position: relative;
  }

  .loader-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 0 0 -2.5rem;
    width: 5rem;
    height: 5rem;
  }

  .loader-ring-light {
    width: 5rem;
    height: 5rem;
    -moz-border-radius: 5rem;
    -webkit-border-radius: 5rem;
    border-radius: 5rem;
    -moz-box-shadow: 0 4px 0 #00abf2 inset;
    -webkit-box-shadow: 0 4px 0 #00abf2 inset;
    box-shadow: 0 4px 0 #00abf2 inset;
    animation: rotate-360 2s linear infinite;
  }

  .loader-ring-track {
    text-align: -moz-center;
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
    -moz-border-radius: 5rem;
    -webkit-border-radius: 5rem;
    border-radius: 5rem;
    -moz-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset;
    -webkit-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset;
    h1 {
      font-size: .7rem;
    }
    h2 {
      font-size: 0.5rem;
    }
  }

  @keyframes rotate-360 {
    from {
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    to {
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}


</style>
